import React, { useState, useEffect } from 'react';
import Horizen from '../../baseUI/ HorizenItem';
import Scroll from "../../baseUI/scroll";
import {getSingerListApi, getSingerDetails} from '../../api/request';
import { categoryTypes, alphaTypes } from '../../api/config';
import LazyLoad ,{ forceCheck }from 'react-lazyload';
import {renderRoutes} from "react-router-config";
import {
    NavContainer,
    ListContainer,
    List,
    ListItem
} from './style';


function Singers(props) {
    let [singerList, setSingerList] = useState([]);
    const category = '1001';
    // 同理可得
    let [alpha, setAlpha] = useState ('A');
    // 设置选择首字母
    useEffect(() => {
        // 重置置顶
        setSingerList([]);
        getSingerListApi(category, alpha, 0).then(res => {
            if(res.code === 200){
                setSingerList(res.artists);
            }
        }).catch(err => {
            console.log('网络错误');
        })
    }, [category, alpha]);
    const handleJump = (item) => {
        getSingerDetails(item.id).then(res => {
            console.log(res);
            if(res.code === 200){
                // localStorage.setItem('hotSongs', JSON.stringify(res.hotSongs));
            }
        })
        // console.log(props);
        // props.history.push(`/singers/${item.id}`);
        // console.log(item);
    };
    // 渲染函数，返回歌手列表
    const renderSingerList = () => {
        return (
            <List>
                {
                    singerList.map ((item, index) => {
                        return (
                            <ListItem key={item.accountId+""+index} onClick={() => handleJump(item)}>
                                <div className="img_wrapper">
                                    <LazyLoad placeholder={<img width="100%" height="100%"  alt="music"/>}>
                                        <img src={`${item.picUrl}?param=300x300`} width="100%" height="100%" alt="music"/>
                                    </LazyLoad>
                                </div>
                                <span className="name">{item.name}</span>
                            </ListItem>
                        )
                    })
                }
            </List>
        )
    };
    return(
        <div>
            <NavContainer>
                <Horizen
                    list={alphaTypes} title={"首字母:"}
                    handleClick={ index => setAlpha(index)}
                    currentTitle={alpha}
                />
                <ListContainer>
                    <Scroll onScroll={forceCheck}>
                        { renderSingerList () }
                    </Scroll>
                </ListContainer>
            </NavContainer>
            { renderRoutes(props.route.routes) }
        </div>
    )
}
export default React.memo(Singers);
